'use strict';
/**
 ************************************************************************
 * ice.date(日期选择器)
 * 作者：闫立峰
 * 官网：https://iceui.cn
 * 创建：2020-06-28
 * 更新：2022-04-27
 * MIT License By iceui.cn
 ************************************************************************
 * 版权声明：该版权完全归ICEUI官方所有，可转载使用和学习，但请务必保留版权信息
 ************************************************************************
 */

/**
 * options      {json}
 *  ├ id        {id}       input的id
 *  ├ format    {string}   时间格式
 *  ├ view      {string}   默认视图
 *  ├ callback  {function} 确认的回调函数
 *  ├ clear     {function} 清空的回调函数
 *  ├ yearFn    {function} 选择年份后的回调函数
 *  ├ monthFn   {function} 选择月份后的回调函数
 *  ├ dayFn     {function} 选择日期后的的回调函数
 *  └ timeFn    {function} 选择时间后的的回调函数
 */
var ice = ice || {};
ice.date = function (options) {
    options = options || {};
    var id = options.id;
    var callback = options.callback || function () {
    };
    var clear = options.clear || function () {
    };
    var yearFn = options.yearFn || function () {
    };
    var monthFn = options.monthFn || function () {
    };
    var dayFn = options.dayFn || function () {
    };
    var timeFn = options.timeFn || function () {
    };
    var obj = document.getElementById(id);
    if (!obj) {
        throw new Error('id错误，请检查该id是否存在！');
    }
    if (obj.iceDate) {
        return;
    }
    options.view = obj.getAttribute('data-view') || options.view;
    options.format = obj.getAttribute('data-format') || options.format;
    var formats = options.format || 'y-m-d';
    var main = document.createElement('div');
    main.className = 'iceDate';
    main.style.zIndex = 999999;
    main.innerHTML = '<div class="iceDate-bg"></div><div class="iceDate-main"><div class="iceDate-header"><div class="iceDate-prev">〈</div><div class="iceDate-time"><div class="iceDate-time-year"></div><div class="iceDate-time-month"></div></div><div class="iceDate-next">〉</div></div><div class="iceDate-content"><div class="iceDate-box iceDate-year-box"></div><div class="iceDate-box iceDate-month-box"></div><div class="iceDate-box iceDate-day-box"><div class="iceDate-week"><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div><div class="iceDate-day"></div></div><div class="iceDate-box iceDate-time-box"></div></div><div class="iceDate-footer"><div class="iceDate-footer-left"><span>选择时间</span></div><div class="iceDate-footer-right"><span>清空</span><span>现在</span><span>确定</span></div></div></div>';
    obj.parentNode.insertBefore(main, obj);
    obj.iceDate = 1;
    //返回对象
    var c = function (a) {
        return main.getElementsByClassName(a)[0]
    };
    var bg = c('iceDate-bg');
    bg.onclick = function () {
        main.style.display = 'none';
    };
    //获取对象
    var prev = c('iceDate-prev'); //上月
    var next = c('iceDate-next'); //下月
    var yearView = c('iceDate-time-year'); //年显示
    var monthView = c('iceDate-time-month'); //月显示
    var yearBox = c('iceDate-year-box'); //年选择器
    var monthBox = c('iceDate-month-box'); //月选择器
    var dayBox = c('iceDate-day-box'); //月选择器
    var dayView = c('iceDate-day'); //日历显示
    var timeBox = c('iceDate-time-box'); //时间选择器
    var footerBox = c('iceDate-footer'); //日历附加按钮
    var btnArr = footerBox.getElementsByTagName('span'); //按钮数组
    var boxArr = main.getElementsByClassName('iceDate-box'); //视图列表
    var timeBtn = btnArr[0]; //选择时间
    var emptyBtn = btnArr[1]; //清空
    var currentBtn = btnArr[2]; //现在
    var okBtn = btnArr[3]; //确认
    var hour, minute, second;
    //定义变量
    var newDate, y, m, d, h, i, s;
    //给input添加class
    if (obj.className.length) {
        var a = obj.className.split(' ');
        a.push('iceDate-icon');
        obj.className = a.join(' ');
    } else {
        obj.className = 'iceDate-icon';
    }
    //格式化input值
    if (obj.value.length) {
        var v = obj.value.replace(/[年月]/g, '-').replace(/[日]/g, ' ').replace(/[时分]/g, ':').replace(/[秒]/g, '');
        v = formatDate(v, formats);
        if (options.view == 'time') {
            if (!new RegExp('-').test(obj.value)) {
                v = formatDate(formatDate('y-m-d') + ' ' + obj.value, formats);
            }
        }
        obj.value = v;
    }
    //input焦点激活出发日历
    obj.onclick = function () {
        init(false, options.view ? options.view : 'day');
        main.style.display = 'block';
        main.style.zIndex = parseInt(main.style.zIndex) + 1;
    }
    //取消input焦点
    obj.onfocus = function () {
        this.blur()
    }
    //选择时间
    timeBtn.onclick = function () {
        if (timeBox.style.display == 'block') {
            viewActive('day');
        } else {
            viewActive('time');
            timeActive(h, i, s);
        }
    }
    //清空
    emptyBtn.onclick = function () {
        obj.value = '';
        init(new Date());
        var json = {
            'el': obj,
            'time': '',
            'date': false,
            'timestamp': ''
        }
        clear(json);
        main.style.display = 'none';
    }
    //现在
    currentBtn.onclick = function () {
        if (options.view) {
            newDate = new Date();
            if (options.view == 'year') {
                y = newDate.getFullYear();
                yearActive(y);
            } else if (options.view == 'month') {
                m = newDate.getMonth();
                monthActive(m);
            } else if (options.view == 'day') {
                d = newDate.getDate();
                dayActive(m);
            } else if (options.view == 'time') {
                h = newDate.getHours();
                i = newDate.getMinutes();
                s = newDate.getSeconds();
                timeActive(h, i, s);
            }
        } else {
            init(new Date());
        }
    }
    //确定
    okBtn.onclick = function () {
        var time = y + '-' + (m + 1) + '-' + d + ' ' + h + ':' + i + ':' + s;
        var date = new Date(y, m, d, h, i, s);
        var timestamp = date.getTime() / 1000;
        var formats = options.format;
        if (!formats) {
            var formats = 'y-m-d h:i:s';
            if (options.view == 'year') formats = 'y';
            if (options.view == 'month') formats = 'm';
            if (options.view == 'day') formats = 'd';
            if (options.view == 'time') formats = 'h:i:s';
        }
        obj.value = formatDate(time, formats);
        var json = {
            'el': obj,
            'time': formatDate(time, formats),
            'date': date,
            'timestamp': timestamp
        }
        if (timeBox.style.display == 'block') {
            timeFn(json);
        }
        callback(json);
        viewActive('day');
        main.style.display = 'none';
    }
    //年选择器
    yearView.onclick = function () {
        yearActive(y);
        viewActive('year');
    }
    //月选择器
    monthView.onclick = function () {
        monthActive(m);
        viewActive('month');
    }
    //上下翻月
    prev.onclick = function () {
        if (yearBox.style.display == 'block') {
            y -= 21;
            yearActive(y);
        } else if (monthBox.style.display == 'block') {
            if (!m) m = 12, --y;
            monthActive(--m);
        } else if (dayBox.style.display == 'block') {
            if (!m) m = 12, --y;
            dayActive(--m);
        }
    }
    next.onclick = function () {
        if (yearBox.style.display == 'block') {
            y += 21;
            yearActive(y);
        } else if (monthBox.style.display == 'block') {
            if (m === 11) m = -1, ++y;
            monthActive(++m);
        } else if (dayBox.style.display == 'block') {
            if (m === 11) m = -1, ++y;
            dayActive(++m);
        }
    }

    //将Date转化为指定格式的String->此方法已经封装在iceui框架的iceui.js模块中,操蛋，为了使本iceDate插件的独立性，不得不在这里再次粘贴一下
    function formatDate(param, format) {
        param = param || false;
        format = format || 'y-m-d h:i:s';
        if (param && new RegExp('(y|m|d|h|i|s)', 'i').test(param)) {
            var date = new Date();
            format = param;
        } else if (!param) {
            var date = new Date();
        } else {
            if (typeof param == 'string') param = param.replace(/-/g, '/');
            if (parseInt(param) > 100000) { //如果为时间戳
                //php的时间戳是10位
                param = String(param).length === 10 ? parseInt(param + '000') : parseInt(param);
            }
            var date = new Date(param);
        }
        var o = {
            'm': '0' + (date.getMonth() + 1), //月
            'd': '0' + date.getDate(), //日
            'h': '0' + date.getHours(), //时
            'i': '0' + date.getMinutes(), //分
            's': '0' + date.getSeconds() //秒
        };
        format = format.replace(new RegExp('y', 'gi'), date.getFullYear()); //年
        for (var k in o) {
            o[k] = o[k].substring(o[k].length - 2, o[k].length);
            format = format.replace(new RegExp(k, 'gi'), o[k]);
        }
        return format;
    }

    //初始化
    function init(date, view) {
        var ys, ms, ds, hs, is, ss;
        if (options.view) {
            newDate = new Date();
            var v = obj.value.length ? parseInt(obj.value) : false;
            if (options.view == 'year') {
                ys = v ? v : new Date().getFullYear();
            } else if (options.view == 'month') {
                ms = v ? v : new Date().getMonth();
            } else if (options.view == 'day') {
                ds = v ? v : new Date().getDate();
            } else if (options.view == 'time') {
                v = obj.value.length ? obj.value : false;
                if (v) {
                    v = v.split(':');
                    hs = parseInt(v[0]);
                    is = parseInt(v[1]);
                    ss = parseInt(v[2]);
                }
            }
        } else {
            var v = obj.value.replace(/[年月]/g, '/').replace(/[日]/g, ' ').replace(/[时分]/g, ':').replace(/[秒]/g, '');
            newDate = date ? date : obj.value.length ? new Date(v) : new Date();
        }
        y = ys ? ys : newDate.getFullYear();
        m = ms ? ms : newDate.getMonth();
        d = ds ? ds : newDate.getDate();
        h = hs ? hs : newDate.getHours();
        i = is ? is : newDate.getMinutes();
        s = ss ? ss : newDate.getSeconds();
        yearActive(y); //激活年选择视图
        monthActive(m); //激活月选择视图
        dayActive(m); //激活日选择视图
        timeActive(h, i, s); //激活时间选择视图
        viewActive(view ? view : 'day'); //打开日选择视图
    }

    //激活视图
    function viewActive(box) {
        timeBtn.innerHTML = '选择时间';
        for (var a = 0, b; b = boxArr[a++];) {
            b.style.display = 'none';
        }
        if (box == 'year') {
            boxArr[0].style.display = 'block';
        } else if (box == 'month') {
            boxArr[1].style.display = 'block';
        } else if (box == 'day') {
            boxArr[2].style.display = 'block';
        } else if (box == 'time') {
            timeBtn.innerHTML = '返回日期';
            boxArr[3].style.display = 'block';
        }
    }

    //激活年选择视图
    function yearActive(nums) {
        var html = '';
        var old = nums - 10;
        for (var i = 0; i < 10; i++) {
            html += '<span>' + (old++) + '年</span>';
        }
        html += '<span class="iceDate-year-active">' + nums + '年</span>';
        for (var i = 0; i < 10; i++) {
            html += '<span>' + (++nums) + '年</span>';
        }
        yearBox.innerHTML = html;
        var span = yearBox.getElementsByTagName('span');
        //年选择器点击事件
        for (var i = 0, a; a = span[i++];) {
            a.onclick = function () {
                for (var ai = 0, as; as = span[ai++];) {
                    as.className = '';
                }
                this.className = 'iceDate-year-active';
                yearView.innerHTML = this.innerHTML;
                y = parseInt(this.innerHTML.split('年')[0]);
                dayActive(m);
                var date = new Date(y, m, d);
                var timestamp = date.getTime() / 1000;
                yearFn({
                    'el': obj,
                    'time': y,
                    'date': date,
                    'timestamp': timestamp
                });
                if (options.view !== 'year') viewActive('day');
            }
        }
    }

    //激活月选择视图
    function monthActive(nums) {
        var html = '';
        for (var i = 0; i < 12; i++) {
            html += i === nums ? '<span class="iceDate-month-active">' + (i + 1) + '月</span>' : '<span>' + (i + 1) + '月</span>';
        }
        monthView.innerHTML = nums + 1 + '月';
        monthBox.innerHTML = html;
        var span = monthBox.getElementsByTagName('span');
        //月选择器点击事件
        for (var i = 0, a; a = span[i++];) {
            a.onclick = function () {
                for (var ai = 0, as; as = span[ai++];) {
                    as.className = '';
                }
                this.className = 'iceDate-month-active';
                monthView.innerHTML = this.innerHTML;
                m = parseInt(this.innerHTML.split('月')[0]) - 1;
                dayActive(m);
                var date = new Date(y, m, d);
                var timestamp = date.getTime() / 1000;
                monthFn({
                    'el': obj,
                    'time': m,
                    'date': date,
                    'timestamp': timestamp
                });
                if (options.view !== 'month') viewActive('day');
            }
        }
    }

    //激活日选择视图
    function dayActive(nums) {
        dayView.innerHTML = '';
        var activeDate = new Date(y, nums, 1);
        var year = activeDate.getFullYear();
        var month = activeDate.getMonth();
        yearView.innerHTML = year + '年';
        monthView.innerHTML = month + 1 + '月';
        //创建日历上面的日期行数
        var n = 1 - activeDate.getDay();
        if (n == 1) n = -6;
        activeDate.setDate(n);
        for (var i = 0; i < 42; i++) {
            var span = document.createElement('span');
            dayView.appendChild(span);
            var date = activeDate.getDate();
            span.innerHTML = date;
            if (date == d) span.className = 'iceDate-day-active';
            span.dateValue = year + "-" + (activeDate.getMonth() + 1) + "-" + date;
            span.onclick = function () {
                var click = dayView.getElementsByClassName('iceDate-day-click');
                if (click.length > 0) click[0].className = '';
                if (this.className != 'iceDate-day-disabled' && this.className != 'iceDate-day-active') {
                    this.className = 'iceDate-day-click';
                }
                //矫正日期
                d = parseInt(this.innerHTML);
                var date = new Date(y, m, d);
                var timestamp = date.getTime() / 1000;
                dayFn({
                    'el': obj,
                    'time': d,
                    'date': date,
                    'timestamp': timestamp
                });
            };
            if (activeDate.getMonth() != month) span.className = "iceDate-day-disabled";
            activeDate.setDate(date + 1);
        }
    }

    //激活时间选择视图
    function timeActive(hNums, iNums, sNums) {
        hNums = parseInt(hNums), iNums = parseInt(iNums), sNums = parseInt(sNums);
        //时
        var hH = '';
        for (var a = 0; a < 24; a++) {
            var b = a < 10 ? '0' + a : a;
            hH += a === hNums ? '<span class="iceDate-time-active">' + b + '</span>' : '<span>' + b + '</span>';
        }
        //分
        var mH = '';
        for (var a = 0; a < 60; a++) {
            var b = a < 10 ? '0' + a : a;
            mH += a === iNums ? '<span class="iceDate-time-active">' + b + '</span>' : '<span>' + b + '</span>';
        }
        //秒
        var sH = '';
        for (var a = 0; a < 60; a++) {
            var b = a < 10 ? '0' + a : a;
            sH += a === sNums ? '<span class="iceDate-time-active">' + b + '</span>' : '<span>' + b + '</span>';
        }
        timeBox.innerHTML = '<div class="iceDate-time-text"><span>时</span><span>分</span><span>秒</span></div><div class="iceDate-time-main"><div class="iceDate-time-col"><div class="iceDate-hour">' + hH + '</div></div><div class="iceDate-time-col"><div class="iceDate-minute">' + mH + '</div></div><div class="iceDate-time-col"><div class="iceDate-second">' + sH + '</div></div></div>';
        hour = timeBox.getElementsByClassName('iceDate-hour')[0];
        minute = timeBox.getElementsByClassName('iceDate-minute')[0];
        second = timeBox.getElementsByClassName('iceDate-second')[0];
        var hourSpan = hour.getElementsByTagName('span');
        var minuteSpan = minute.getElementsByTagName('span');
        var secondSpan = second.getElementsByTagName('span');

        //不使用这种方法的话，运行过快会导致容器的offsetHeight一直为0，而设置scrollTop就会失效
        //所以判断offsetHeight是否大于0了，如果大于0说明文档已经加载完成，然后设置scrollTop
        //之前一直无法设置scrollTop还以为我的智商下线了，卧槽……尼玛的害得我检查了半天
        var getH = setInterval(function () {
            if (hour.offsetHeight > 0) {
                //自动滚到时刻位置
                hour.scrollTop = (hNums - 3) * 32;
                minute.scrollTop = (iNums - 3) * 32;
                second.scrollTop = (sNums - 3) * 32;
                clearInterval(getH);
            }
        }, 0);

        //时选择器
        for (var a = 0; a < hourSpan.length; a++) {
            hourSpan[a].a = a;
            hourSpan[a].onclick = function () {
                for (var ai = 0, as; as = hourSpan[ai++];) {
                    as.className = '';
                }
                this.className = 'iceDate-time-active';
                h = this.innerHTML;
                hour.scrollTop = (this.a - 3) * 32;
            }
        }
        //分选择器
        for (var a = 0; a < minuteSpan.length; a++) {
            minuteSpan[a].a = a;
            minuteSpan[a].onclick = function () {
                for (var ai = 0, as; as = minuteSpan[ai++];) {
                    as.className = '';
                }
                this.className = 'iceDate-time-active';
                i = this.innerHTML;
                minute.scrollTop = (this.a - 3) * 32;
            }
        }
        //秒选择器
        for (var a = 0; a < secondSpan.length; a++) {
            secondSpan[a].a = a;
            secondSpan[a].onclick = function () {
                for (var ai = 0, as; as = secondSpan[ai++];) {
                    as.className = '';
                }
                this.className = 'iceDate-time-active';
                s = this.innerHTML;
                second.scrollTop = (this.a - 3) * 32;
            }
        }
    }
};
(function () {
    var a = document.createElement('style');
    a.innerHTML = '.iceDate *{margin:0;padding:0;box-sizing:border-box;}.iceDate{font-size:15px;width:100%;height:100%;position:fixed;left:0;top:0;display:none;z-index:8000;}.iceDate-bg{width:100%;height:100%;position:fixed;left:0;top:0;background:rgba(0,0,0,0.1)}.iceDate-main{width:320px;height:400px;overflow:hidden;user-select:none;position:fixed;transform:translate(-50%,-50%);top:50%;left:50%;background:#fff;box-shadow:0 0 20px rgba(0,0,0,0.13);z-index:9900;animation:opacity-in 0.3s ease,move-up 0.3s ease-out}.iceDate-header{color:#fff;font-size:20px;overflow:hidden;height:80px;line-height:80px;text-align:center;background:#009688}.iceDate-prev{float:left;font-size:17px;width:50px;cursor:pointer}.iceDate-next{float:right;font-size:17px;width:50px;cursor:pointer}.iceDate-prev:hover,.iceDate-next:hover{color:#fff9c8}.iceDate-time{font-size:20px;display:inline-block}.iceDate-time-year{font-size:20px;cursor:pointer;line-height:initial;margin-top:10px;outline:0;-webkit-tap-highlight-color:rgba(255,255,255,0)}.iceDate-time-month{font-size:20px;cursor:pointer;line-height:initial;margin-top:5px;outline:0;-webkit-tap-highlight-color:rgba(255,255,255,0)}.iceDate-week span{width:36px;float:left;text-align:center;height:40px;line-height:40px;margin:0 2px}.iceDate-week{color:#fff;overflow:hidden;height:40px;padding:0 20px;background:#009688}.iceDate-day{padding:15px 20px;background:rgba(255,255,255,0.79);display:inline-block}.iceDate-day span{color:#000;width:34px;height:34px;line-height:34px;margin:0 3px 1px;float:left;text-align:center;border-radius:20px;cursor:pointer;outline:0;-webkit-tap-highlight-color:rgba(255,255,255,0)}.iceDate-day span:hover{background:#69bfb7;color:#fff}.iceDate-day span.iceDate-day-disabled{color:rgba(0,0,0,0.26)}.iceDate-day span.iceDate-day-active{background:#4bafa6;color:#fff}.iceDate-day span.iceDate-day-click{background:#00BCD4;color:#fff}.iceDate-content{height:270px;overflow:hidden;position:relative}.iceDate-content>div{width:100%;height:100%;background:#ffffff;position:absolute;top:0;left:0;display:none}.iceDate-year-box{padding-left:10px;padding-right:6px;padding-top:11px}.iceDate-year-box span{width:33.333333%;height:38px;line-height:38px;text-align:center;cursor:pointer;display:inline-block;border:1px solid #efefef;margin-left:-1px;margin-top:-1px;transition:all ease .3s}.iceDate-year-box span:hover{color:#fff;background:#69bfb7}.iceDate-year-box span.iceDate-year-active{color:#fff;background:#4bafa6}.iceDate-month-box{padding-left:10px;padding-right:6px;padding-top:11px}.iceDate-month-box span{width:33.333333%;height:65px;line-height:65px;text-align:center;cursor:pointer;display:inline-block;border:1px solid #efefef;margin-left:-1px;margin-top:-1px;transition:all ease .3s}.iceDate-month-box span:hover{color:#fff;background:#69bfb7}.iceDate-month-box span.iceDate-month-active{color:#fff;background:#4bafa6}.iceDate-time-text{display:flex;text-align:center;margin:15px 20px 5px}.iceDate-time-text span{flex:1}.iceDate-time-main{width:280px;height:226px;background:#ffffff;display:flex;border:1px solid #b9b9b9;margin:8px 20px 20px}.iceDate-time-col{flex:1;border-right:1px solid #b9b9b9;overflow:hidden}.iceDate-time-col span{display:block;color:#888;background:#ffffff;height:32px;line-height:32px;padding-left:37px;outline:0;-webkit-tap-highlight-color:rgba(255,255,255,0);cursor:pointer;text-align:left!important;}.iceDate-time-col span.iceDate-time-active{color:#fff;background:#9c9c9c}.iceDate-time-col div{width:186px;height:100%;overflow-y:auto}.iceDate-time-main div:last-child{border-right:none}.iceDate-footer{position:absolute;left:0;bottom:10px;width:100%}.iceDate-footer-left{float:left;margin-left:10px}.iceDate-footer-right{float:right;text-align:right;margin-right:10px}.iceDate-footer span{height:27px;line-height:26px;margin-left:-1px;padding:0 10px;border:1px solid #efefef;white-space:nowrap;font-size:14px;display:inline-block;cursor:pointer;-webkit-tap-highlight-color:rgba(255,255,255,0)}.iceDate-footer span:hover{color:#009688}.iceDate-icon{min-width:195px;background-image:url();background-size:23px;background-repeat:no-repeat;background-position:right center;background-color:#fff;background-origin:content-box;outline:0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:rgba(255,255,255,0)}@media (max-width:768px){.iceDate-icon{background-image:url()}}@media (min-width:768px){.iceDate-time-col span:hover{color:#fff;background:#b9b9b9}}';
    document.getElementsByTagName('head')[0].appendChild(a);
})();